import Vue from 'vue'
import VueRouter from 'vue-router'

/**
 * View 页面主视图
 * Songlist 登录用户的个人歌单页面
 * RecentlyPlay 登录用户的个人最近播放
 * Follow 登录用户的关注页面
 * Follows 用户的关注页面
 * Followeds 用户的粉丝页面
 * Cloud 登录用户的音乐云盘
 * Userdetail 用户的个人详情页面
 * Find 发现音乐
 * Recommend 个性推荐 （发现音乐子路由）
 * Commission 专属定制 （发现音乐子路由）
 * Musiclist 歌单 （发现音乐子路由）
 * Leaderboard 排行榜 （发现音乐子路由）
 * Singer 歌手 （发现音乐子路由）
 * Newest 最新音乐 （发现音乐子路由）
 * Recommendsongs 每日推荐歌曲
 * MusiclistCategory (Musiclist 歌单 子路由)
 * MusiclistDetail (Musiclist 歌单 子路由)
 * SongerDetail 歌手详情页面
 * Newsong (Newest 最新音乐 子路由)
 * Newalbum (Newest 最新音乐 子路由)
 * Albumlist 专辑页面
 * Search 搜索结果页面
*/
const View = () => import('../components/view/View.vue')
const Songlist = () => import('../components/musicpage/Songlist.vue')
const RecentlyPlay = () => import('../components/recentlyPlay/recentlyPlay.vue')
const Follow = () => import('../components/follows/Follow.vue')
const Follows = () => import('../components/follows/Follows.vue')
const Followeds = () => import('../components/follows/Followeds.vue')
const Cloud = () => import('../components/cloud/Cloud.vue')
const Userdetail = () => import('../components/userdetail/Userdetail.vue')
const Find = () => import('../components/find/Find.vue')
const Recommend = () => import('../components/find/childRouter/Recommend.vue')
const Commission = () => import('../components/find/childRouter/Commission.vue')
const Musiclist = () => import('../components/find/childRouter/Musiclist.vue')
const Leaderboard = () => import('../components/find/childRouter/Leaderboard.vue')
const Singer = () => import('../components/find/childRouter/Singer.vue')
const Newest = () => import('../components/find/childRouter/Newest.vue')
const Recommendsongs = () => import('../components/recommendSongs/Recommendsongs.vue')
const MusiclistCategory = () => import('../components/find/childRouter/musiclistChildRouter/MusicListCategory.vue')
const MusiclistDetail = () => import('../components/find/childRouter/musiclistChildRouter/MusicListDetail.vue')
const SongerDetail = () => import('../components/songerdetail/Songerdetail.vue')
const Newsong = () => import('../components/find/childRouter/newestChildRouter/Newsong.vue')
const Newalbum = () => import('../components/find/childRouter/newestChildRouter/Newalbum.vue')
const Albumlist = () => import('../components/albumpage/Albumlist.vue')
const Search = () => import('../components/Search/Search.vue')


Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/view',
  },
  {
    path: '/view',
    component: View,
    redirect: '/view/find',
    children: [
      { path: '/view/songlist', component: Songlist },
      { path: '/view/recentlyplay', component: RecentlyPlay },
      { path: '/view/follow', component: Follow },
      { path: '/view/follows', component: Follows },
      { path: '/view/followeds', component: Followeds },
      { path: '/view/cloud', component: Cloud },
      { path: '/view/userdetail', component: Userdetail },
      {
        path: '/view/find',
        component: Find,
        redirect: '/view/find/recommend',
        children: [
          { path: '/view/find/recommend', component: Recommend },
          { path: '/view/find/commission', component: Commission },
          {
            path: '/view/find/musiclist',
            component: Musiclist,
            redirect: '/view/find/musiclist/musiclistcategory',
            children: [
              { path: '/view/find/musiclist/musiclistcategory', component: MusiclistCategory },
              { path: '/view/find/musiclist/musiclistdetail', component: MusiclistDetail },
            ]
          },
          { path: '/view/find/leaderboard', component: Leaderboard },
          { path: '/view/find/singer', component: Singer },
          {
            path: '/view/find/newest',
            component: Newest,
            redirect: '/view/find/newest/newsong',
            children: [
              { path: '/view/find/newest/newsong', component: Newsong },
              { path: '/view/find/newest/newalbum', component: Newalbum },
            ]
          },
        ]
      },
      { path: '/view/recommendsongs', component: Recommendsongs },
      { path: '/view/songerdetail', component: SongerDetail },
      { path: '/view/albumlist', component: Albumlist },
      { path: '/view/search', component: Search },
    ]
  },

]

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})


// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数，表示放行
  //    next()  放行   next('/view')  强制跳转

  // 获取 token
  const tokenStr = window.sessionStorage.getItem('token');

  if (to.path === '/view/recentlyplay' && !tokenStr) {
    return next('/view');
  }
  if (to.path === '/view/follow' && !tokenStr) {
    return next('/view');
  }
  if (to.path === '/view/cloud' && !tokenStr) {
    return next('/view');
  }
  next();
})

export default router
